<template>
	<view class="comment-comment flex">
		<image class="avatar" :src="comment.userAvatar || require('@/static/public/logo.png')" mode="aspectFill"></image>
		<view class="info">
			<view class="user flex"> 
				<text class="name">{{ comment.userName }}</text>
				<view class="score"> 
					<u-icon v-for="(item,index) in comment.score" :key="index"  name="star-fill" size="14" color="#ffb300"></u-icon>
				</view>
			</view>
			<view class="content">{{ comment.content }}</view>
			<view class="images flex" v-if="comment.images && comment.images.length">
				<image v-for="(img, imgIndex) in comment.images" :key="imgIndex" :src="img" @click="viewImages(imgIndex)" mode="aspectFill"></image>
			</view>
			<view class="time">{{ comment.createTime | formatTimes }}</view>
		</view>
	</view>
</template>

<script>
	import { formatWeChatTime, formatTimestamp } from '@/utils/index.js'
	export default {
		props: {
			comment: {
				type: Object,
				default () {}
			}
		},
		methods: {
			viewImages(index) {
				uni.previewImage({
					urls: this.comment.images,
					current: index
				})
			}
		},
		filters: {
			formatTime(time) {
				return formatWeChatTime(time)
			},
			
			formatTimes(time) {
				if (!time) return '无';
				const data = formatTimestamp(time);
				return data.date + ' ' + data.time
			}
		}
	}
</script>

<style scoped lang="scss">
	.comment-comment {
		margin-bottom: 20rpx;

		&:not(:last-child) {
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20rpx;
		}

		.avatar {
			width: 82rpx;
			height: 82rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			align-self: flex-start;
		}

		.info {
			flex: 2;
		}

		.user {
			align-comments: center;
			margin-bottom: 10rpx;
			justify-content: space-between;

			.name {
				font-size: 28rpx;
				color: #333;
				font-family: "PINGFANG";
			}

			.score {
				display: flex;
				font-size: 36rpx;
				color: #FC0A01;
				font-weight: 400;
				font-family: "PINGFANG";
			}  
		}

		.content {
			font-size: 24rpx;
			color: #333;
			font-family: "PINGFANG";
			margin-bottom: 20rpx;
		}

		.images {
			flex-wrap: wrap;
			// gap: 20rpx;
			margin-bottom: 20rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				&:nth-child(3n + 2) {
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}
		}

		.time {
			font-size: 22rpx;
			color: #AAA;
			font-weight: 400;
			font-family: "PINGFANG";
		}
	}
	
</style>